/**
 * 
 * 

        
                     文档结构：







                    视口：

                    作用：就是在移动浏览器中  当页面宽度超过设备宽度   浏览器内部虚拟的一个页面容器  
                     将页面容器缩放到设备这么大  然后展示     


                       大多数手机浏览器的视口 宽度960

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



                            网站特色板块：
                              




        吸顶效果：
        affix：

    <p>123456</p>


        <h1>你好</h1>

        <div   id="div1" data-spy="affix" data-offset-top="60" data-offset-bottom="200"   >
  123456
       </div>
       <div  id="div2"></div>
#div1{
  background-color: aqua;
   height: 90px;
   width: 100%;
   top:0 ;
}


         data-offset-top="60"   什么时候出现  60  




         less语法介绍（一门预处理语言）：
         (安装 sudo npm i less-loader less -D )

        变量  嵌套（混合）    

         .containter{
           color: red;
            .row{
              color:black;
               [class^="col-"],[class*=" col-"]{           //[class*=" col-"]  col 前面要有空格
                  color: pink;
               }
            }
         }
                  定义一个变量：
                    @mainColor = #E92322

   #div3{
    width: 100px;
    height: 100px;
    background-color:@mainColor;
  }



  函数：
   #div3{
    background-color: lighten(#F0F0F0 ,10%);
    color: darken(#F0F0F0, 10%);
  }


  #div5{
    
  }



      







            sass预处理语言：
            （ 安装 sudo npm i sass-loader node-sass -D ）

            配置：{test :  /\.scss$/ ,use:['style-loader' ,'css-loader','sass-loader']},
                ( index.scss   但却是 sass-loader  )











 */